<template>
  <div class="home" :style="{ background: `linear-gradient(180deg, ${color}, 20%, white)` }">
    <div class="lay-header">
      <headerVue @lookTask="lookTask"></headerVue>
    </div>
    <div class="lay-body">
      <router-view :key="route.name" v-slot="{ Component }">
        <transition>
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
    <div
      class="lay-footer"
      v-show="route.name != 'raceing-quiz' && route.name != 'complier'"
    >
      <footerVue></footerVue>
    </div>
    <taskDialog ref="taskDia"></taskDialog>
  </div>
</template>

<script setup>
import headerVue from "@/components/publicComponents/header.vue";
import footerVue from "@/components/publicComponents/footer.vue";
import taskDialog from "@/components/ojComponents/taskItem/taskDialog.vue";
import { useRoute } from "vue-router";
import { onMounted, ref } from "vue";
import {getSettingColorAPI} from '@/api/ojAPI/ojAPI.js'

const route = useRoute();

const getColor = () => {
  getSettingColorAPI().then(res => {
    if (res.data.code === 200) {
      color.value = res.data.data
    }
  })
}

const color = ref('#fff')
onMounted(() => {
  document.documentElement.scrollTop = 0;
  getColor()
});

const taskDia = ref(null);

const lookTask = (data) => {
  taskDia.value.open(data);
};
</script>

<style lang="less" scoped>
.lay-header {
  width: 100%;
  height: 60px;
  line-height: 60px;
  position: sticky;
  top: 0;
  z-index: 99;
}

.home {
  background: linear-gradient(180deg, rgb(217, 219, 245), 30%, white);
}

.lay-body {
  width: 100%;
  min-height: 90vh;
  z-index: 0;
  padding: 10px 0 10px 0;
}

.lay-footer {
  width: 100%;
  padding: 3vh 0 8vh 0;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease-in-out;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
